<template>
  <div class="" style="height:100%;">
    <div class="ub padding-css3 f14">
      <div class="ub ub-f1 ub-ac color-main">
        <img class="logoimg ub ub-ac" src="./logo_pn.png">
        <span class="f14 pnn">{{airDynamicFindjg.details.flightNo}}</span>
      </div>
      <div class="ub ub-ac f14 ">
        <span class="riqi">{{airDynamicFindjg.details.datop}}</span>
        <span class="marin-l-css2 zhou">{{date}}</span>
      </div>
    </div>
    <div class="finddiv1  ub ub-ver">
      <div class="ub ub-ver  ban f14">
        <div class="ub ub-pc yuandiv">
          <div class="ub ub-pc banyuan" style="transform: rotate(225deg);">
          </div>
        </div>
        <div class="ub ub-ac ub-fh ub-ver bayuanText">
          <div class="flightState f16 ub">{{airDynamicFindjg.details.flightState}}</div>
          <div class="f8  flightStates"> </div>
        </div>
      </div>
      <div class="ub ub-pc f14 padding-css6">
        <div class="citydiv ub-fh ub ">
          <div class="ub ub-pe leftdiv qishi">{{airDynamicFindjg.details.startCityName}}</div>
          <div class="ub middiv ub ub-pc"><img class="img2" src="./flyto_white.png"></div>
          <div class="ub leftdiv mude">{{airDynamicFindjg.details.endCityName}}</div>
        </div>
      </div>
      <div class="ub ub-pc f12 zt-999 padding-css5">
        <div class="citydiv ub-fh ub ">
          <div class="ub ub-pe leftdiv endCityInfo cl-fff">暂无天气信息</div>
          <div class="ub middiv"></div>
          <div class="ub leftdiv startCityInfo cl-fff">暂无天气信息</div>
        </div>
      </div>
    </div>
    <div class="ub ub-pc ub-ver ">
      <div class="ub-fh ub f14 zt-999 margin-t-css2">
        <div class="ub ub-pe leftdiv f12">起飞机场</div>
        <div class="ub middiv"></div>
        <div class="ub ub-f1 f12">到达机场</div>
      </div>
      <div class="ub-fh ub f14">
        <div class="ub ub-pe leftdiv qijic ">{{airDynamicFindjg.details.startFlightAddress}}</div>
        <div class="ub middiv"></div>
        <div class="ub leftdiv mdejic">{{airDynamicFindjg.details.endFilghtAddress}}</div>
      </div>

      <div class="ub-fh ub f14 zt-999 margin-t-css2">
        <div class="ub ub-pe leftdiv f12">预计起飞</div>
        <div class="ub middiv f12"></div>
        <div class="ub ub-f1 f12">预计到达</div>
      </div>
      <div class="ub-fh ub f14">
        <div class="ub ub-pe leftdiv">
          <span class="etd">{{airDynamicFindjg.details.etd.substr(11,5)||'--:--'}}</span>
        </div>
        <div class="ub middiv"></div>
        <div class="ub leftdiv">
          <span class="eta">{{airDynamicFindjg.details.eta.substr(11,5)||'--:--'}}</span>
        </div>
      </div>
      <div class="ub-fh ub f14 zt-999 margin-t-css2">
        <div class="ub ub-pe leftdiv  f12">实际起飞</div>
        <div class="ub middiv"></div>
        <div class="ub ub-f1 f12">实际到达</div>
      </div>
      <div class="ub-fh ub f14">
        <div class="ub ub-pe leftdiv">
          <span class="atdChn">{{airDynamicFindjg.details.atdChn.substr(11,5)||'--:--'}}</span>
        </div>
        <div class="ub middiv"></div>
        <div class="ub leftdiv">
          <span class="ataChn">{{airDynamicFindjg.details.ataChn.substr(11,5)||'--:--'}}</span>
        </div>
      </div>
      <div class="ub-fh ub f14 zt-999 margin-t-css2">
        <div class="ub ub-pe leftdiv f12">登机口</div>
        <div class="ub middiv"></div>
        <div class="ub ub-f1"></div>
      </div>
      <div class="ub-fh ub f14">
        <div class="ub ub-pe leftdiv">
          <span class="boardingGate">{{airDynamicFindjg.details.boardingGate}} </span>
        </div>
        <div class="ub middiv"></div>
        <div class="ub leftdiv">
          <span></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { mapState } from 'vuex';
export default {
  created: function () {
    console.log(this.airDynamicFindjg)
    let self = this;
    this.$store.commit('changeHeader', { // 提交首页header
      left: '返回',
      right: '',
      middle: self.airDynamicFindjg.details.flightNo,
      ifshow: true,
      leftAction: '-1',
      leftIcon: 'leftIcon',
      rightAction: '',
      rightIcon: ''
    });
    self.date = self.getday(new Date(self.airDynamicFindjg.details.datop).getDay())
  },
  data: function () {
    return {
      date: ''
    }
  },
  components: {
  },
  methods: {
    getday: function (date) {
      switch (date) {
        case 0:
          return '周日';
          break;
        case 1:
          return '周一';
          break;
        case 2:
          return '周二';
          break;
        case 3:
          return '周三';
          break;
        case 4:
          return '周四';
          break;
        case 5:
          return '周五';
          break;
        case 6:
          return '周六';
          break;
      }
    }
  },
  computed: mapState(['loginData', 'airDynamicFindjg'])
}
</script>

<style lang="stylus">
@import '../../stylus/base.styl';
.padding-css3
  padding: f_times(0.7) f_times(0.7);
.f14
  font-size: f_times(0.9);
.color-main
  color: #843D99;
.logoimg
  width: f_times(0.9);
.pnn
  margin-left: f_times(0.2);
.finddiv1
  background-image: url('./dynamics_sky.png');
  color: white;
  padding: f_times(1.4) 0 f_times(0.7) 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
.ban
  height: f_times(3.5);
.yuandiv
  height: f_times(3.5);
  color: white;
  overflow: hidden;
.banyuan
  width: f_times(7);
  height: f_times(7);
  border-radius: f_times(4.2);
  border-top: 4px solid #FFF;
  border-left: 4px solid #FFF;
  border-right: 4px solid #763689;
  border-bottom: 4px solid #763689;
  overflow: hidden;
  transform: rotate(46deg);
  -ms-transform: rotate(46deg);
  -moz-transform: rotate(46deg);
  -webkit-transform: rotate(46deg);
  -o-transform: rotate(46deg);
.bayuanText
  position: relative;
  top: f_times(-2.8);
.f16
  font-size: f_times(1.1);
.f8
  font-size: f_times(0.56);
.padding-css6
  padding: f_times(0.7) 0;
.leftdiv
  width: 38%;
  word-break: break-all;
.middiv
  width: 24%;
.leftdiv
  width: 38%;
  word-break: break-all;
.img2
  width: f_times(1.1);
.padding-css5
  padding: f_times(0.35) 0;
.zt-999
  color: #999;
.cl-fff
  color: #FFF;
.f12
  font-size: f_times(0.85);
.margin-t-css2
  margin-top: f_times(1.4);
  margin-bottom: f_times(0.5);
.bg-white
  background: #FFF;
.zhengming
  position: fixed;
  height: f_times(2.8);
  border-top: 2px solid #EEE;
  bottom: 0;
.w100
  width: 100%;
.boder-left
  border-left: 2px solid #EEE;
</style>